<template>
  <div class="box">
    <!--轮播表操作栏-->
    <el-form ref="form" label-width="100px" style="width: 93%">
      <el-form-item label="图层名：">
        <el-input size="mini" v-model="chooseComponent.layerName"></el-input>
      </el-form-item>

      <el-form-item label="显示行数：">
        <el-input-number size="mini" v-model="chooseComponent.option.rowNum" controls-position="right" :min="1"
                         :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="间隔时间：">
        <el-input-number size="mini" v-model="chooseComponent.option.waitTime" controls-position="right" :min="1000"
                         :precision="0"></el-input-number>
      </el-form-item>
      <el-form-item label="轮播方式：">
        <el-select size="mini" v-model="chooseComponent.option.carousel" placeholder="请选择">
          <el-option key="single" label="单行" value="single"></el-option>
          <el-option key="page" label="一页" value="page"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数值单位：">
        <el-input size="mini" v-model="chooseComponent.option.unit"></el-input>
      </el-form-item>
      <el-form-item label="自动排序：">
        <el-switch
          v-model="chooseComponent.option.sort">
        </el-switch>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
  import * as u from '@/util/util'
  export default {
    name: "index",
    computed: {
      //当前选中的值
      chooseComponent() {
        return this.$store.state.chooseComponent
      },
    },
    data() {
      return {
        //表格渲染标识
        key: 0,
        option: {
          page: false,
          align: 'center',
          menuAlign: 'center',
          menuWidth: 90,
          height: 200,
          editBtn: false,
          delBtn: false,
          column: [
            {
              label: '列名',
              type: "input",
              prop: 'name',
              overHidden: true,
              width: 70,
            },
            {
              label: '对齐方式',
              prop: 'align',
              type: "select",
              width: 70,
              overHidden: true,
              dicData: [
                {value: "left", label: '左对齐'},
                {value: "center", label: '居中'},
                {value: "right", label: '右对齐'}
              ]
            },
            {
              label: '列宽',
              hide: true,
              type: "input",
              overHidden: true,
              prop: 'width',
            },
          ]
        },
        tableData: [],
      }
    },
    created() {
      this.init();
    },

    methods: {


      /**
       * 初始化
       */
      init() {
        //处理表格数据
        this.dealWithTableData();
      },

      /**
       * 初始化处理表格数据
       */
      dealWithTableData() {
        this.chooseComponent.option.data=u.copyBean(this.chooseComponent.data);
      },
    }
  }
</script>

<style scoped lang="scss">
  .box {
    width: 100%;
    flex: 1;
    color: white;

    ::v-deep .el-form-item__label {
      color: white;
    }

    ::v-deep .el-collapse-item__header {
      background-color: #545c64;
      color: white;
    }

    ::v-deep .el-collapse-item__content {
      background-color: #545c64;
      color: white;
    }

    ::v-deep .el-radio__label {
      color: white;
    }
  }
</style>
